<!-- chat/templates/chat/index.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Chat Rooms</title>
    </head>
    <body>
        What chat room would you like to enter?
        <br>
        <input id="room-name-input" type="text" size="100">
        <br>
        <input id="room-name-submit" type="button" value="Enter">
        <script>
        document.querySelector('#room-name-input').focus();
        document.querySelector('#room-name-input').onkeyup = function(e) {
            if (e.key === 'Enter') {  // enter, return
                document.querySelector('#room-name-submit').click();
            }
        };

        document.querySelector('#room-name-submit').onclick = function(e) {
            var roomName = document.querySelector('#room-name-input').value;
            window.location.pathname = '/websocket/' + roomName + '/';
        };
        </script>
    </body>
</html>
